<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        文章分类:<input type="text" v-model="searchConditions.category">
        发布状态:<input type="text" v-model="searchConditions.state">
        <button v-on:click="search">搜索</button>
        <br><br>
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <!--展示后端返回的数据-->
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
</body>
<script src="../axios.min.js"></script>
<script type="module">
    import {createApp} from '../vue.esm-browser.js'
    createApp({
        data(){
            return {
                articleList:[],//从后端获取并初始化
                searchConditions:{//按以下条件搜索
                    category:'',//分类，绑定到input上
                    state:''//文章状态，绑定到input上

                }
            }
        },
        methods: {
            search:function(){//绑定给搜索按钮
               axios({
               url:'http://localhost:8080/article/search'//?category='+this.searchConditions.category+"&state="+this.searchConditions.state,
               ,method:'get',
               params://注意不要用data:{}传参，他是在请求体中传参(@RequestBody)，params就是@RequestParams方式传参
                {
                    category:this.searchConditions.category,
                    state:this.searchConditions.state
                }
               }).then(result=>{
                    //把得到的数据赋值给articleList,实现更新表格数据
                    this.articleList=result.data
                    //    console.log(result.data)
               }).catch(result=>{
                    console.log(result)
               })
            }
        },
        //生命周期钩子函数
        mounted:function() {
            //在vue挂载后获取所有文章数据
            //发送异步请求：axios
            axios.get('http://localhost:8080/article/getAll')
            .then(result=>{
                //成功回调
                //console.log(result.data)
                this.articleList=result.data//将后端返回的数组赋值给data中定义的数组
            })
            .catch(result=>{
                //失败回调
                console.log(result)
            })
        },
    }).mount("#app")
</script>
</html>